{% extends 'app01/site.html' %}
<style>
    {% block css %}
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url(/static/img/upup.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }


        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url(/static/img/downdown.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .collage {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            text-align: center;

            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }
        #digg_tips1, #digg_tips1 > a {
            color: red;
        }

    {% endblock %}
</style>

{% block files %}

{% endblock %}

{% block content %}

    <div class="col-md-10">
        <!--文章显示内容详细内容开始-->
        <h1>{{ article_obj.title }} </h1>
        <div class="article_content">
            {{ article_obj.content|safe }}
        </div>
        <!--文章显示内容详细内容开始-->
    </div>
    <div class="col-md-10 col-md-offset-2">
        <!--点赞点踩样式开始-->
        <div class="row"> <div class="diggword1 pull-right" id="digg_tips1">

                    </div>&nbsp;</div>
        <div class="row">

            <div class="col-md-6 pull-right">
{#                <div id="div_digg">#}
                     <!--提示信息-->
                    <div class="diggit actions pull-right">
                        <span class="diggnum " id="digg_count">{{ click.up_num }}</span>
                    </div>
                    <div class="buryit actions pull-right">
                        <span class="burynum" id="bury_count">{{ click.down_num }}</span>
                    </div>

                <div class="pull-right collage " id="div_img_id"><img src="{{ img }}" alt="加载失败"></div>
{#                </div>#}
            </div>

        </div>
        <div class="row">

        </div>
        <!--点赞点踩样式结束-->
        {#文章评论开始#}
        {% if request.user.is_authenticated %}
            <div class="row">
                <div>
                    <p><span class="glyphicon glyphicon-comment">发表评论</span></p>
                    <div><textarea name="comment" id="id_comment" cols="60" rows="3"></textarea></div>
                    <button class="btn btn-primary btn-sm" id="id_btn">提交</button>


                </div>
            </div>
                <hr>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <a class="btn btn-danger btn-sm btn-block" href="{{ back_url}}">返回上一页</a></div>

            </div>


        {% else %}
            <p><span class="glyphicon glyphicon-comment">
{#后面的字符串查询，是记录是用户从哪篇文章跳转到登录界面，到时候登录成功要跳转回来的。#}
                <a href="/app01/login?url={{ url }}">登录才能评论。

            </a>
            </span></p>

        {% endif %}
        {#文章评论结束#}
        {#    文章评论的展示开始  由article_detail函数来实现#}
        <hr>
        <div class="row">
            <div class="col-md-6 tem_class">

                {% for obj in c_page %}
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="/media/{{ obj.user.avatar }}" alt="加载失败" height="60">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">{{ obj.user.username }} </h4>
                            {% if  obj.parent.user.username != null %}
                                @{{ obj.parent.user.username }}:

                            {% endif %}
                            {{ obj.content }}   <!--取掉a标签的href，就不会跳转了-->
                            <p>{{ obj.comment_time }} <a class="reply" username_my="{{ obj.user.username }}" comment_my="{{ obj.id }}">回复</a></p>
                        </div>
                    </div>
                    <hr>

                {% endfor %}
                {#            用户输入评论后，点击提交的时候会临时渲染出用户写的评论#}
                <span id="id_tem"></span>
            </div>


        </div>

        {#     文章的评论结束#}
        {#    分页器显示开始#}
        {# 分页显示 #}
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="pager">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {{ page_html }}
                        </ul>
                    </nav>
                </div>

            </div>
        </div>
        {#    分页器显示结束#}


        <div class="row" style="text-align: right"><h2>精英计划，联系 <span
                class="glyphicon glyphicon-phone-alt"></span>1232222，<span class="glyphicon glyphicon-envelope"></span>123@12233.com
        </h2></div>

    </div>
{% endblock %}



{% block js %}
    <script>
        //子评论和评论都是发送同一个ajax请求，唯一区别就是要发送parent_id的值
        //设置一个全局的parent_id
        let parent_id=null;
        //点赞点踩的ajax请求
        $('.actions').on('click', function () {
            {#此时的$(this)代表的是谁，就是谁点就是谁，要么是赞的div，要么是踩的div#}
            let isUp = $(this).hasClass('diggit') //如果点击的标签有diggit类属性，则该标签是点赞，没有就是在点踩了。
            let Div = $(this);//将点击了的div标签保存起来

            //isUp是true就代表是点赞，负责就是点踩了
            //朝后端发送ajax请求
            $.ajax({ //点赞点踩只有登录了才能进行
                url: '/app01/up_or_down/',
                type: 'post',
                data: {
                    'article_id':{{ article_obj.pk }},
                    'is_Up': isUp,
                    //csrf已经使用通用的方式实现了
                },
                success: function (array) {
                    if (array.code === 1000) {
                        {#alert(array.msg)#}
                        //要将点赞或点踩数加1,将原来的数字拿到，+1，再写回去
                        let num = parseInt(Div.text()) + 1 //或使用Number()来进行转换
                        Div.text(num)


                    } else {
                        //不能重复操作
                        //不能点赞自己的文章
                        {#alert(array.msg)#}
                        $('#digg_tips1').html(array.msg)
                        //请先登录的。带有一个a标签，跳转到登录界面，登录成功后要返回到原来进入登录的界面上
                        {#后面的字符串查询，是记录是用户从哪篇文章跳转到登录界面，到时候登录成功要跳转回来的。#}
                        $('#id_login').attr('href', '/app01/login?url={{ url }}')
                    }
                }
            })
        })
        //评论的ajax请求
        $('#id_btn').click(function () {
            //拿到用户评论的内容。
            let content = $('#id_comment').val()
            //判断当前评论是否是子评论，将我们手动加的@username 去除
            if(parent_id){
                //找到\n对应的索引，如何利用切片，切片骨头不顾尾，索引要加1
                let indexNum = content.indexOf('\n')+1
                //拿到\n的索引值，加1后再切片。
                content=content.slice(indexNum)
                //切除indexNum前面的所有内容，只保留后面的内容
            }
            $.ajax({
                url: '/app01/article/comment/',
                type: 'post',
                data: {
                    'article_id': '{{ article_id }}',
                    'content': content,
                    'parent_id':parent_id,//后端存储前端的null没有任何关系，跟没有存储一样
                },
                success: function (array) {
                    if (array.code === 1000) {

                        //将评论框清空了
                        $('#id_comment').val('')
                        //临时进行渲染
                        let username = '{{ request.user.username }}'
                        let temp = `
                        <div class="media">
                          <div class="media-body">
                            <h4 class="media-heading">${username}</h4>
                            ${content}
                          </div>
                        </div>
                        `
                        //将上面一大段在评论后面先渲染出来。
                        $('.tem_class').append(temp);

                        //将parent_id 设置会null，回到最初的地方。
                        parent_id=null

                    } else {
                        alert(array.msg)
                    }
                }
            })

        })
        //子评论的ajax请求
        //子评论需要：父评论的id，父评论的用户名
        //给回复按钮绑定点击按钮
       $('.reply').on('click',function () {
         //拿到被评论的用户名
         let parentName = $(this).attr('username_my')
         //拿到被评论的的评论id
          parent_id = $(this).attr('comment_my')
         //当用户点击回复的时候，要将用户的鼠标聚焦到评论框中，且在评论内先写 @用户名 回车，用户再写自己的评论。
          $('#id_comment').val('@'+parentName+'\n').focus()
         //用户写完对评论的评论后渲染到前端。


     })

    //给收藏设置一个点击事件。
    $('#div_img_id').on('click',function () {

        if('{{ col_img }}'==='no'){ //用户未收藏，现在想收藏该文章
            alert('收藏成功')
            $('#div_img_id>img').first().attr('src','/static/img/active.png/')

            $.ajax({
                url:'{% url "app01_cellact_article" %}',
                type:'post',
                data:{
                    'operate':true,//代表加入收藏
                    'article_id':'{{ article_id }}',
                },
                success:function (attr) {
                   window.location.reload()//需要刷新后，才能再次使用
                    //因为我们的判断条件是由函数 article_detail发送的col_img
                    //而我们这里发送的是ajax请求，局部刷新，异步请求，原来的col_img不会变，保持一开始访问页面的值。
                    //所以需要刷新来更新col_img的值

                }
            })
        }
        else if('{{ col_img }}'==='yes')//代表用户已经收藏，现在要取消收藏
        {
            alert('取消收藏')
            {#$('#div_img_id').firstChild.attr('src','/static/img/noactive.png/')#}
            $('#div_img_id>img').first().attr('src','/static/img/noactive.png/')
            $.ajax({
                url:'{% url "app01_cellact_article" %}',
                type:'post',
                data:{
                    'operate':false, //代表取消收藏
                    'article_id':'{{ article_id }}',
                },
                success:function (attr) {
                     window.location.reload()//需要刷新后，才能再次使用

                }
            })
        }

    });
        //关注的ajax请求
         $('#focu_btn_id').click(function () {
        $.ajax({
            url:'/app01/focu/user/',
            type:'get',
            data:{'my_name':'{{ request.user.username }}','focu_name':'{{ username }}'},
            success:function (array) {
                alert(array.msg)
            }
        })

    })

    </script>
{% endblock %}
